<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link
      rel="icon"
      href="favicon.ico"
      mce_href="/favicon.ico"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="./style.css" />
    <title>Sonni妙趣横生画板</title>
  </head>

  <body>
    <div class="tip">欢迎来到森尼妙趣横生画板，请尽情玩耍吧！希望一切顺顺利利！</div>
    <!-- canvas画布开始 -->
    <canvas id="cvs" width="300" height="300"></canvas>
    <!-- canvas画布结束 -->
    <!-- 操作区域开始 -->
    <div id="actions" class="actions">
      <!-- 画笔SVG开始 -->
      <svg id="pen" class="active icon" aria-hidden="true">
        <use xlink:href="#icon-pen"></use>
      </svg>
      <!-- 画笔SVG结束 -->
      <!-- 橡皮擦SVG开始 -->
      <svg id="eraser" class="icon" aria-hidden="true">
        <use xlink:href="#icon-eraser"></use>
      </svg>
      <!-- 橡皮擦SVG结束 -->
      <!-- 清空SVG开始 -->
      <svg id="clear" class="clear" aria-hidden="true">
        <use xlink:href="#icon-clear"></use>
      </svg>
      <!-- 清空SVG结束 -->
      <!-- 下载SVG开始 -->
      <svg id="download" class="save" aria-hidden="true">
        <use xlink:href="#icon-save">save</use>
      </svg>
      <!-- 下载SVG结束 -->
    </div>
    <!-- 颜色LIST开始 -->
    <ol class="colors">
      <li id="red" class="red"></li>
      <li id="orange" class="orange"></li>
      <li id="blue" class="blue"></li>
      <li id="green" class="green"></li>
      <li id="purple" class="purple"></li>
      <li id="black" class="black"></li>
    </ol>
    <!-- 颜色LIST结束 -->
    <!-- 笔画大小开始 -->
    <ol class="sizes">
      <li id="thin" class="thin active"></li>
      <li id="thick" class="thick"></li>
      <li id="thicker" class="thicker"></li>
    </ol>
    <!-- 笔画大小结束 -->
    <!-- 操作区域结束  -->
    <script language="javascript">
      //防止页面后退
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", function () {
        history.pushState(null, null, document.URL);
      });
    </script>
    <script src="./index.js"></script>
    <script src="https://at.alicdn.com/t/font_1158778_0j8565ytrbas.js"></script>
  </body>
</html>
